<script setup lang="ts">
import {computed, ref} from 'vue';
import skuItem from './components/skuItem';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { onPageScroll, onReachBottom, onLoad } from '@dcloudio/uni-app';
import {img, redirect, moneyFormat, pxToRpx, dateFormatYMDHMS} from "@/utils/common";
import {getShopDeviceFlows} from '@/app/api/sku.ts';

const keyword = ref('');
const current = ref(0);
const tabs = ref([
	{ name: '全部' },
	{ name: '设备租金' },
	{ name: '设备耗材' },
]);
// 获取系统状态栏的高度
let menuButtonInfo: any = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
const loading = ref<boolean>(true);//页面加载动画
const infoLoading = ref<boolean>(true);//页面加载动画
const list: Record<string, any> = ref([])
const is_usage = ref('')
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
const onTabChange = (e: any) => {
  if(e.index == 0){
    is_usage.value = ''
  }else if(e.index == 1){
    is_usage.value = '0'
  }else{
    is_usage.value = '1'
  }
	current.value = e.index;
  getMescroll().resetUpScroll();
};
const mescrollTop = computed(() => {
  // if (Object.keys(menuButtonInfo).length) {
  //   // pxToRpx(8) => 表示胶囊的padding-bottom  728 => 表示列表以上的该高度【不包括自定义头部】
  //   return (pxToRpx(Number(menuButtonInfo.height)) + pxToRpx(menuButtonInfo.top) + pxToRpx(8) + 20) + 'rpx'
  // } else {
  //   // 表示列表以上的高度
    return '20rpx'
  // }
})
const getDataList = (mescroll: any) => {
  infoLoading.value = true;
  let obj = {}
  if(is_usage.value != ''){
    obj.is_usage = is_usage.value
  }
  getShopDeviceFlows({
    page: mescroll.num,
    limit: mescroll.size,
    ...obj
  }).then((res: any) => {
    let newArr = res.data.data
    //设置列表数据
    if (mescroll.num == 1) {
      list.value = []; //如果是第一页需手动制空列表
    }
    list.value = list.value.concat(newArr);
    infoLoading.value = false;
    mescroll.endSuccess(newArr.length);
  }).catch(() => {
    loading.value = false;
    infoLoading.value = false;
    mescroll.endErr(); // 请求失败, 结束加载
  })
}
</script>

<template>
	<view class="h-[100vh] bg-[#F6F6F6]">
<!--		<view class="px-[24rpx] pt-[20rpx]">-->
<!--			<u-search v-model="keyword" placeholder="请输入搜索关键词" shape="round" inputAlign="left" :showAction="false"/>-->
<!--		</view>-->

		<view class="px-[24rpx] mt-[10rpx]">
			<u-tabs
				:list="tabs"
				:current="current"
				@change="onTabChange"
				lineColor="#9A7A4B"
				:activeStyle="{ color: '#9A7A4B', fontWeight: '600' }"
			/>
		</view>

    <mescroll-body ref="mescrollRef" :down="{ use: false }" @init="mescrollInit" @up="getDataList" :top="mescrollTop">
      <template v-if="list.length && !infoLoading && !loading">
        <view class="px-[24rpx] pb-[40rpx]" v-for="item in list">
          <!-- 设备租金/推广设备：复用现成 skuItem，type 设为 bill 可显示订单号且隐藏右上角角标 -->
          <sku-item v-for="i in 2" :key="`bill-${i}`" :item="{}" type="bill" />

          <!-- 设备耗材佣金 示例 -->
          <view class="min-h-[270rpx] bg-[#fff] my-[20rpx] rounded-[20rpx] p-[24rpx] box-border relative">
            <view class="text-[rgb(74,74,74)] mb-[10rpx]">订单号：{{item.order_no}}</view>
            <view class="flex items-center relative z-1">
              <u-image :src="img(item.device.goods_image)" width="150rpx" height="150rpx" mode="aspectFill" class="mr-[28rpx]" />
              <view class="text-[24rpx] text-[rgb(153,153,153)] leading-[40rpx]">
                <view class="text-[28rpx] text-[#000] leading-[56rpx]">{{ item.device.goods_name }}</view>
                <view>门店：{{item.store.store_name}}</view>
                <view>设备ID：{{ item.device.device_id }}</view>
                <view>结算：{{ dateFormatYMDHMS(item.settlement_time) }}</view>
              </view>
              <view class="text-[#FF0000] text-[32rpx] absolute z-2 right-0 top-[calc(50%-18rpx)]">+{{item.rent_money}}</view>
              <view class="text-[#999] text-[28rpx] absolute z-2 right-0 top-[calc(50%+40rpx)]">x{{item.usage_count}}</view>
            </view>
          </view>
        </view>
      </template>
      <mescroll-empty
          :option="{'icon': img('addon/shop_fenxiao/sale/empty.png'), 'tip': '暂无数据'}"
          v-if="!list.length"></mescroll-empty>
    </mescroll-body>
	</view>
</template>

<style lang="scss" scoped></style>
<style lang="scss"></style>
